<template>
   <LoginHeader>联合登录</LoginHeader>
   <section class="container" v-if="isBind">
    <div class="unbind">
      <div class="loading"></div>
    </div>
   </section>
   <section class="container" v-else>
    <nav class="tab">
      <a href="javascript:;" @click="hasAccount = true">
        <i class="iconfont icon-bind"></i>
        <span >已有账号，请绑定手机</span>
      </a>
      <a href="javascript:;" @click="hasAccount = false">
        <i class="iconfont icon-edit"></i>
        <span>没有账号，请完善资料</span>
      </a>
    </nav>
    <div class="tab-content" v-if="hasAccount">
      <CallbackBind :unionId="unionId"/>
    </div>
    <div class="tab-content" v-else>
      <CallbackPatch :unionId="unionId"/>
    </div>
   </section>
</template>

<script>
import LoginHeader from './login-header.vue'
import CallbackBind from './callback-bind.vue'
import CallbackPatch from './callback-patch.vue'
import Message from '@/components/library/Message'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { userQQlogin } from '@/api/user'
import QC from 'qc'
export default {
  name: 'CallbackPage',
  components: {
    LoginHeader,
    CallbackBind,
    CallbackPatch
  },
  setup () {
    const isBind = ref(false)
    const hasAccount = ref(false)

    // 假设已经绑定，默认会去做一次登录，如果登录失败的话证明未绑定
    // 1.获取QQ联动的openid 也就是后台需要的唯一标识 unappid
    // 2.根据QQ互联网的openid去进行登录 准备一个窗口
    const store = useStore()
    const router = useRouter()
    const unionId = ref(null)
    console.log(QC)
    if (QC.Login.check()) {
      // 检查QQ是否登录
      QC.Login.getMe((openId) => {
        unionId.value = openId
        console.log(openId)
        userQQlogin(openId).then(data => {
          // 代表：使用QQ登录成功
          // 1.存储用户信息
          const { id, account, avatar, mobile, nickname, token } = data.result
          store.commit('user/setUser', { id, account, avatar, mobile, nickname, token })
          // 2. 条状到来源页或者首页
          // QQ登录成功后合并购物车
          store.dispatch('cart/mergeLocalCart').then(() => {
            router.push(store.state.user.redirectUrl || '/')
            Message({ text: 'QQ登录成功', type: 'success' })
          })
        }).catch(e => {
          // 绑定失败： 没有绑定手机绑好或者没有注册过账号
          isBind.value = false
        })
      })
    }

    return { hasAccount, isBind, unionId }
  }
}
</script>

<style lang="less" scoped>

.container {
  padding: 25px 0;
  position: relative;
  height: 730px;
  .unbind {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 25px 0;
    z-index: 99;
    .loading {
      height: 100%;
      background: #fff url(../../../assets/images/load.gif) no-repeat center / 100px 100px;
    }
  }
  .tab {
    background: #fff;
    height: 80px;
    padding-top: 40px;
    font-size: 18px;
    text-align: center;
    a {
      color: #666;
      display: inline-block;
      width: 350px;
      line-height: 40px;
      border-bottom: 2px solid #e4e4e4;
      i{
        font-size: 22px;
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
        margin-left: 4px;
      }
      &.active {
        color: @xtxColor;
        border-color: @xtxColor;
      }
    }
  }
  .tab-content {
    min-height: 600px;
    background: #fff;
  }
}

</style>
